<template>
	<div>
		<!-- 搜索start -->
		<div class="top">
			<el-button type="primary" @click="dialogVisible = true">添加</el-button>
			<el-button type="primary" @click="printVisible = true">预览</el-button>
			<el-input placeholder="请输入检索内容">
				<template slot="append">
					<el-button>搜索</el-button>
				</template>
			</el-input>
			<!-- 打印预览 -->
			<el-dialog title="打印预览" :visible.sync="printVisible" fullscreen width="70%">
				<iframe src="table.html" frameborder="0"></iframe>
				<el-button type="primary" @click='print'>打印</el-button>
			</el-dialog>
		</div>
		<!-- 搜索end -->
		<!-- 列表展示start -->
		<el-table :data="orderList" style="width: 100%" height="520">
			<!-- 子订单展示start -->
			<el-table-column type="expand">
				<template slot-scope="props">
					<el-form label-position="left" inline class="demo-table-expand">
						<el-table :data="props.row.subOrders" style="width: 100%">
							<el-table-column prop="id" label="编号" width="100">
							</el-table-column>
							<el-table-column prop="pName" label="产品名称">
							</el-table-column>
							<el-table-column prop="pUnitName" label="产品单位">
							</el-table-column>
							<el-table-column prop="pUnitPrice" label="产品单价">
							</el-table-column>
							<el-table-column prop="pNum" label="产品数量">
							</el-table-column>
							<el-table-column prop="pTotalPrice" label="产品总价">
							</el-table-column>
							<el-table-column prop="sid" label="产品ID">
							</el-table-column>
							<el-table-column prop="cid" label="分类ID">
							</el-table-column>
							<el-table-column prop="" label="操作" width="180">
								<!-- <el-button-group>
								  <el-button type="primary" icon="el-icon-edit" size="mini"></el-button>
								  <el-button type="primary" icon="el-icon-share" size="mini"></el-button>
								  <el-button type="primary" icon="el-icon-delete" size="mini"></el-button>
								</el-button-group> -->	
								<el-button type="text"><i class="el-icon-edit"></i>修改</el-button>
								<el-button type="text"><i class="el-icon-plus"></i>新增</el-button>
								<el-button type="text" @click='suborderDel'><i class="el-icon-delete"></i>删除</el-button>
							</el-table-column>
						</el-table>
					</el-form>
				</template>
			</el-table-column>
			<!-- 子订单展示end -->
			<el-table-column prop="id" label="编号" width="100">
			</el-table-column>
			<el-table-column prop="customer" label="客户名称">
			</el-table-column>
			<el-table-column prop="payType" label="支付方式">
			</el-table-column>
			<el-table-column prop="business" label="商家名称">
			</el-table-column>
			<el-table-column prop="remarks" label="备注">
			</el-table-column>
			<el-table-column prop="createTime" label="创建日期" width="250">
			</el-table-column>
			<el-table-column prop="" label="操作" width="180">
				<template slot-scope='scope'>
					<el-button type="primary" icon="el-icon-edit" @click="showEdit(scope.row)"></el-button>
					<template>
						<el-popconfirm title="确定永久删除？" @confirm="del(scope.row.id)">
							<el-button type="primary" icon="el-icon-delete" slot="reference"></el-button>
						</el-popconfirm>
					</template>
				</template>
			<!-- 	<el-button type="text"><i class="el-icon-edit"></i>修改</el-button>
				<el-button type="text"><i class="el-icon-delete"></i>删除</el-button> -->
			</el-table-column>
		</el-table>
		<!-- 列表展示end -->
		<!-- 分页start current-page当前页数-->
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page.page"
			:page-sizes="page.sizes" :page-size="page.rows" layout="total, sizes, prev, pager, next, jumper"
			:total="page.totle">
		</el-pagination>
		<!-- 分页end -->
		<!-- 添加 start-->
		<el-dialog title="添加订单" top='10vh' :visible.sync="dialogVisible" width="85%" height='50%'>
			<el-form :inline="true" :model="addOrder" class="demo-form-inline" label-width="90px" ref="addOrder">
				<div class="formTop">
					<el-form-item label="客户" prop='customer'>
						<el-input v-model="addOrder.customer" placeholder="请输入客户名称"></el-input>
					</el-form-item>
					<el-form-item label="付款方式" prop='paytype'>
						<el-select v-model="addOrder.paytype" placeholder="请选择付款方式">
							<el-option label="微信" value="微信"></el-option>
							<el-option label="支付宝" value="支付宝"></el-option>
							<el-option label="现金" value="现金"></el-option>
							<el-option label="欠款" value="欠款"></el-option>
							<el-option label="银行卡" value="银行卡"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="商家" prop='business'>
						<el-input disabled v-model="addOrder.business" placeholder="请输入商家"></el-input>
					</el-form-item>
					<el-form-item label="备注" prop='remarks'>
						<el-input type="textarea" :rows="1" placeholder="请输入备注内容" v-model="addOrder.remarks"
							width='500px'>
						</el-input>
					</el-form-item>
				</div>
				<!-- 子订单 -->
				<div class="formBtm">
					<div class="formBtmLeft">
						<!-- <p>产品信息</p> -->
						<el-form-item label="产品名称" prop='orderObj'>
							<el-input v-model="orderObj.pName" placeholder="请输入产品名称"></el-input>
						</el-form-item>
						<el-form-item label="单位" prop='pUnitName'>
							<el-input v-model="orderObj.pUnitName" placeholder="请输入产品单位"></el-input>
						</el-form-item>
						<el-form-item label="数量" prop='pNum'>
							<!-- <el-input type='number' v-model="orderObj.pNum" placeholder="请输入产品数量"></el-input> -->
							<template>
								<el-input-number v-model="orderObj.pNum" controls-position="right" :min="1">
								</el-input-number>
							</template>
						</el-form-item>
						<el-form-item label="单价" prop='pUnitPrice'>
							<!-- <el-input type='number' v-model="orderObj.pUnitPrice" placeholder="请输入产品单价"></el-input> -->
							<template>
								<el-input-number v-model="orderObj.pUnitPrice" controls-position="right" :min="1">
								</el-input-number>
							</template>
						</el-form-item>
						<el-form-item label="总价" prop='pTotalPrice'>
							<el-input disabled v-model="orderObj.pTotalPrice" :placeholder="totalPrice"></el-input>
						</el-form-item>
						<el-button type="primary" @click='addSubList'>添 加 子 订 单</el-button>
					</div>
					<div class="formBtmRight">
						<el-table :data="addOrder.subList" style="width: 100%" @row-click='delRight' height="100%">
							<el-table-column prop="pName" label="产品名称">
							</el-table-column>
							<el-table-column prop="pUnitName" label="产品单位">
							</el-table-column>
							<el-table-column prop="pNum" label="数量">
							</el-table-column>
							<el-table-column prop="pUnitPrice" label="单价">
							</el-table-column>
							<el-table-column prop="pTotalPrice" label="总价">
							</el-table-column>
							<!-- 			<el-table-column prop="cid" label="地址">
							</el-table-column>	
							<el-table-column prop="sid" label="地址">
							</el-table-column> -->
							<el-table-column label="操作">
								删除
							</el-table-column>
						</el-table>
					</div>
				</div>
			</el-form>

			<span slot="footer" class="dialog-footer">
				<el-button @click="resetForm('addOrder')">重置</el-button>
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="sendData">提 交</el-button>
			</span>
		</el-dialog>
		<!-- 添加end -->
		<!-- 修改start -->
		<el-dialog title="编辑订单" top='10vh' :visible.sync="editorVisible" width="85%" height='50%'>
			<el-form :inline="true" :model="addOrder" class="demo-form-inline" label-width="90px" ref="addOrder">
				<div class="formTop">
					<el-form-item label="客户" prop='customer'>
						<el-input v-model="addOrder.customer" placeholder="请输入客户名称"></el-input>
					</el-form-item>
					<el-form-item label="付款方式" prop='paytype'>
						<el-select v-model="addOrder.paytype" placeholder="请选择付款方式">
							<el-option label="微信" value="微信"></el-option>
							<el-option label="支付宝" value="支付宝"></el-option>
							<el-option label="现金" value="现金"></el-option>
							<el-option label="欠款" value="欠款"></el-option>
							<el-option label="银行卡" value="银行卡"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="商家" prop='business'>
						<el-input disabled v-model="addOrder.business" placeholder="请输入商家"></el-input>
					</el-form-item>
					<el-form-item label="备注" prop='remarks'>
						<el-input type="textarea" :rows="1" placeholder="请输入备注内容" v-model="addOrder.remarks"
							width='500px'>
						</el-input>
					</el-form-item>
				</div>
				<!-- 编辑子订单 -->
				<div class="formBtm">
					<div class="formBtmLeft">
						<!-- <p>产品信息</p> -->
						<el-form-item label="产品名称" prop='orderObj'>
							<el-input v-model="orderObj.pName" placeholder="请输入产品名称"></el-input>
						</el-form-item>
						<el-form-item label="单位" prop='pUnitName'>
							<el-input v-model="orderObj.pUnitName" placeholder="请输入产品单位"></el-input>
						</el-form-item>
						<el-form-item label="数量" prop='pNum'>
							<!-- <el-input type='number' v-model="orderObj.pNum" placeholder="请输入产品数量"></el-input> -->
							<template>
								<el-input-number v-model="orderObj.pNum" controls-position="right" :min="1">
								</el-input-number>
							</template>
						</el-form-item>
						<el-form-item label="单价" prop='pUnitPrice'>
							<!-- <el-input type='number' v-model="orderObj.pUnitPrice" placeholder="请输入产品单价"></el-input> -->
							<template>
								<el-input-number v-model="orderObj.pUnitPrice" controls-position="right" :min="1">
								</el-input-number>
							</template>
						</el-form-item>
						<el-form-item label="总价" prop='pTotalPrice'>
							<el-input disabled v-model="orderObj.pTotalPrice" :placeholder="totalPrice"></el-input>
						</el-form-item>
						<el-button type="primary" @click='addSubList'>添 加 子 订 单</el-button>
					</div>
					<div class="formBtmRight">
						<el-table :data="addOrder.subList" style="width: 100%" @row-click='delRight' height="100%">
							<el-table-column prop="pName" label="产品名称">
							</el-table-column>
							<el-table-column prop="pUnitName" label="产品单位">
							</el-table-column>
							<el-table-column prop="pNum" label="数量">
							</el-table-column>
							<el-table-column prop="pUnitPrice" label="单价">
							</el-table-column>
							<el-table-column prop="pTotalPrice" label="总价">
							</el-table-column>
							<!-- 			<el-table-column prop="cid" label="地址">
							</el-table-column>	
							<el-table-column prop="sid" label="地址">
							</el-table-column> -->
			
						</el-table>
					</div>
				</div>
			</el-form>
		
			<span slot="footer" class="dialog-footer">
				<el-button @click="resetForm('addOrder')">重置</el-button>
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="sendData">提 交</el-button>
			</span>
		</el-dialog>
		<!-- 修改end -->
	</div>
</template>

<script>
	var _this = this;
	export default {
		name: '',
		data() {
			return {
				// 打印窗口
				printVisible: false,
				// 修改框展示
				editorVisible: false,
				// 添加框展示
				dialogVisible: false,
				// 订单列表展示 为了展示数据
				orderList: [{
					SubList: null,
					business: "陈冲",
					createTime: "2021-05-18T08:43:47+08:00",
					customer: "asda",
					id: 70,
					payType: "欠款",
					remarks: "立即配送",
					subOrders: [{
						cid: 12,
						id: 130,
						pName: "asdas",
						pNum: 111,
						pTotalPrice: 12321,
						pUnitName: "asdas",
						pUnitPrice: 111,
						parentid: 70,
						sid: 46,
					}, {
						cid: 12,
						id: 131,
						pName: "asdas",
						pNum: 111,
						pTotalPrice: 12321,
						pUnitName: "asdas",
						pUnitPrice: 111,
						parentid: 70,
						sid: 46,
					}]
				}, ],
				// 分页
				page: {
					currentPage: 1,
					totle: 0,
					sizes: [1, 5, 6, 7, 14],
					rows: 7,
					page: 1
				},
				// 修改数据
				editOrder: {},
				// 添加数据
				addOrder: {
					"customer": "",
					"paytype": "",
					"remarks": "",
					"business": "陈冲",
					"subList": []
				},
				orderObj: {
					"pName": "",
					"pUnitName": "",
					"pNum": 0,
					"pUnitPrice": 0,
					"pTotalPrice": 0,
					"cid": 12,
					"sid": 46,
				}
			}
		},
		created() {
			_this = this;
			_this.getOrderList()
		},
		//计算
		computed: { //计算 不支持异步操作  异步操作必须用watch监听
			totalPrice: function() {
				this.orderObj.pTotalPrice = (this.orderObj.pNum * this.orderObj.pUnitPrice).toFixed(2)
				return (this.orderObj.pNum * this.orderObj.pUnitPrice).toFixed(2)
			}
		},
		mounted() {},
		methods: {
			// 子订单删除
			suborderDel(){
				console.log(123)
			},
			// 打印
			print() {
				window.print()
			},
			// 搜索
			search() {
				console.log(product)
			},
			// 分页
			handleSizeChange(val) {
				// 通过改变页面 每页显示几条 得到数据 重新渲染 
				console.log(`每页 ${val} 条`);
				// console.log(val)
				_this.page.rows = val
				_this.getOrderList()
			},
			handleCurrentChange(val) {
				// console.log(`当前页: ${val}`);
				_this.page.page = val
				_this.getOrderList()
			},
			// 获取列表
			getOrderList() {
				_this.$axios({
					url: "/api/v1/orderList",
					headers: {
						token: JSON.parse(sessionStorage.getItem("member")).token
					},
					method: 'POST',
					data: {
						"page": _this.page.page,
						"pageSize": _this.page.rows
					}
				}).then(res => {
					console.log(res);
					console.log(res.data.data.list[0].subOrders);
					res.data.data.list[0].subOrders.splice(0,1)
					if (res.data.code == 200) {
						_this.orderList = res.data.data.list
						_this.page.totle = res.data.data.count
					}
				})
			},
			// 删除
			del(id) {
				console.log(id);
				_this.$axios.delete("/api/v1/orderDel", {
					params: {
						"id": id,
					},
					headers: {
						token: JSON.parse(sessionStorage.getItem("member")).token
					}
				}).then(res => {
					console.log(res)
					if (res.data.code == 200) {
						_this.$message.success('删除成功')
						_this.getOrderList()
					} else {
						_this.$message.error('删除失败')
					}
				})
			},
			// 添加订单start
			// 提交
			sendData() {
				console.log(this.addOrder);
				_this.$axios({
					url: "/api/v1/orderAdd",
					headers: {
						token: JSON.parse(sessionStorage.getItem("member")).token
					},
					method: "post",
					data: _this.addOrder
				}).then(res => {
					console.log(res);
					if (res.data.code == 200) {
						//_this.$message.success("添加成功").onClose:function(){
						//_this.dialogVisible=false
						//},
						_this.$message({
							type: "success",
							message: "添加成功",
							duration: 800,
							onClose: function() {
								_this.dialogVisible = false
								// 调用重置方法
								_this.resetForm("addOrder")
								_this.getOrderList()
							},
						})
					} else(
						_this.$message({
							type: "error",
							message: "添加失败",
							duration: 800,
							onClose: function() {
								_this.dialogVisible = false
								// 调用重置方法
								_this.resetForm("addOrder")
							},

						})
					)
				})
			},
			// 添加子订单
			addSubList() {
				console.log(this.orderObj);
				this.addOrder.subList.push({
					"pName": this.orderObj.pName,
					"pUnitName": this.orderObj.pUnitName,
					"pNum": Number(this.orderObj.pNum),
					"pUnitPrice": Number(this.orderObj.pUnitPrice),
					"pTotalPrice": Number(this.orderObj.pTotalPrice),
					"cid": 12,
					"sid": 46,
				})
			},
			// 子订单删除
			delRight(row) {
				console.log(row);
				_this.addOrder.subList.map((item, index) => {
					if (item.pName = row.pName) {
						_this.addOrder.subList.splice(index, 1)
					}
				})
			},
			// 重置
			resetForm(formName) {
				_this.$refs[formName].resetFields();
				_this.addOrder.subList = []
				// console.log(_this.orderObj);
				for (let k in _this.orderObj) {
					if (k != "cid" && k != "sid") {
						_this.orderObj[k] = ''
					}
				}
			},
			// 添加订单end
			// 修改框
			showEdit(obj){
				// console.log(id);
				_this.editorVisible=true;
			},
			// 修改
			editor(){
				console.log('修改了');
			}
		}
	}
</script>

<style scoped="scoped">
	.top {
		display: flex;
		background: #fff;
		padding: 10px 10px;
		box-sizing: border-box;

	}

	.top .el-input {
		width: 250px;
		margin: 0 20px;
	}

	.el-pagination {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}


	.formBtm {
		display: flex;
		justify-content: space-between;
	}

	.formBtmLeft {
		box-shadow: 0 0px 10px rgb(0 21 41 / 8%) !important;
		width: 35%;
		padding: 10px;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.formBtmLeft p {
		font-size: 16px;
		margin-bottom: 10px;
	}

	.formBtmLeft .el-button {
		width: 40%;
		margin: 0 auto;
	}

	.formBtmRight {
		padding: 10px;
		box-sizing: border-box;
		width: 60%;
		box-shadow: 0 0px 10px rgb(0 21 41 / 8%) !important;
		overflow-y: auto;
	}
</style>
<style>
	.el-dialog__body {
		padding: 10px 20px;
		box-sizing: border-box;
	}
	.el-popover__reference-wrapper {
		margin-left: 10px;
	}
</style>
